<template>
  <div class="category">
    <nav-bar class="category-nav">
      <div slot="center">商品分类</div>
    </nav-bar>
    <side-bar :category-list="categoryList" @sideBarClick="sideBarClick" />
    <tab-control class="tabControlFixed"
      ref="tabControlFixed" 
      :titles="titleList" 
      @tabClick="tabClick" 
      v-show="isTabFixed" />
    <scroll class="scroll-area" 
      ref="scroll"
      :probeType="3"
      @scroll="contentScroll">
      <sub-category :sub-category-list="subCategoryList" @subImgLoad="subImgLoad" />
      <tab-control ref="tabControl" 
        :titles="titleList" 
        @tabClick="tabClick" />
      <goods-list :goods="categoryDetailList" :img-height="true" />
    </scroll>
    <back-top @click.native="backClick" v-show="isShowBackTop" />
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar';
import SideBar from './childComps/SideBar';
import Scroll from 'components/common/scroll/Scroll';
import SubCategory from './childComps/SubCategory';
import TabControl from 'components/content/tabcontrol/TabControl';
import GoodsList from 'components/content/goods/GoodsList';

import {imgListenerMixin, backTopListenerMixin} from "common/mixin";

import {getCategory, getSubCategory, getCategoryDetail} from 'network/category';

export default {
  name: "Category",
  components: {
    NavBar,
    SideBar,
    Scroll,
    SubCategory,
    TabControl,
    GoodsList 
  },
  data() {
    return {
      // 分类侧边栏数据
      categoryList: [],
      // 分类内容数据
      subCategoryList: [],
      categoryDetailList: [],

      titleList: ["流行", "新款", "精选"],
      isTabFixed: false,
      tabOffsetTop: 0,
      currentIndex: 0
    }
  },
  mixins: [imgListenerMixin, backTopListenerMixin],
  created() {
    this.getCategory();
  },
  deactivated() {
    // 取消全局事件的监听
    this.$bus.$off('imageLoad', this.imgListener);
  },
  methods: {
    subImgLoad() {
      this.newRefresh();
      this.tabOffsetTop = this.$refs.tabControl.$el.offsetTop;
    },
    contentScroll(position) {
      // 1.判断BackTop是否显示
      this.backTopListener(position);

      // 2.决定TabControl是否吸顶
      this.isTabFixed = (-position.y) > this.tabOffsetTop;
    },
    tabClick(index) {
      console.log("index: ", index);
    },
    sideBarClick({maitKey, miniWallkey, index}) {
      if(this.currentIndex === index) {
        // 防止重复点击
        return;
      }
      this.currentIndex = index;
      // 每次切换分类初始化tab-control的下标
      this.$refs.tabControl.currentIndex = 0;
      this.$refs.tabControlFixed.currentIndex = 0;
      // 请求对应的推荐列表
      this.getCategoryDetail(miniWallkey, 'pop');
      this.getSubCategory(maitKey);
    },
    // 事件监听相关方法
    tabClick(index) {
      const typeList = ["pop", "new", "sell"];
      this.getCategoryDetail(this.categoryList[this.currentIndex].miniWallkey, typeList[index]);
      this.$refs.tabControl.currentIndex = index;
      this.$refs.tabControlFixed.currentIndex = index;
    },
    getCategory() {
      getCategory().then(res => {
        // console.log("category: ", res);
        this.categoryList = res.data.category.list;
        this.$nextTick(() => {
          this.getSubCategory(this.categoryList[0].maitKey);
          this.getCategoryDetail(this.categoryList[0].miniWallkey, 'pop');
        });
      });
    },
    getSubCategory(key) {
      getSubCategory(key).then(res => {
        // console.log("SubCategory: ", res);
        this.subCategoryList = res.data.list;
      });
    },
    getCategoryDetail(key, type) {
      getCategoryDetail(key, type).then(res => {
        // console.log("CategoryDetail: ", res);
        this.categoryDetailList = res;
      });
    }
  }
}
</script>

<style scoped>
.category {
  position: relative;
  height: 100vh;
}

.category-nav {
  color: #fff;
  background-color: var(--color-tint);
}

.tabControlFixed {
  position: absolute;
  top: 44px;
  left: 100px;
  right: 0;
  z-index: 10;
}

.scroll-area {
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 100px;
  right: 0;
  overflow: hidden;
  background-color: #fff;
}
</style>
